<style>
  .app-list .head {
       border-bottom: 1px solid #eee;
   }
  .app-list .list-item{
       display: flex;
       height: 80px;
       border-bottom: 1px solid #eee;
   }
   .list-item-media {
       width:100px;
       line-height: 80px;
       text-align: center;
   }
   .list-item-inner {
       display: flex;
       display: -webkit-flex;
   }
   .list-item-inner .list-item-text {
        -webkit-flex: 1;
          flex: 1;
          height: 40px;
          line-height: 40px;
   }
  .app-list {
      font-size: 14px;
      color: #999999;
  }
  .app-list .detail {
       line-height: 80px;
       text-align: center;
       color: #409eff;
	   font-size: 16px;
	   cursor: pointer;
   }

  .app-list .title {
       font-size: 16px;
       color: #333333;
   }
  .app-list .el-rate__icon{
     font-size: 12px;
 }
</style>

<template>
    <section class="app-list">
        <div class="head" v-if="homeShow">
			<el-row class="marginTop30px toolbar">
				<el-col :span="23">
						<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="全部应用" name="first">
							<el-row >
								<el-col :span='24'>
								<ul>
								<li class="list-item" v-for="(item,index) in tableData"  >
								<div class="list-item-media">
									<img v-if="index==0" src="/src/images/app_sign.png" style="margin-top:15px">
									<img v-if="index==1" src="/src/images/task.png" style="margin-top:15px">
									<img v-if="index==2" src="/src/images/pushcase.png" style="margin-top:15px">
									<img v-if="index==3" src="/src/images/app_police.png" style="margin-top:15px">
										<img v-if="index>3" src="/src/images/app_sign.png" style="margin-top:15px">
									</div> 
								<div style="width:98%">
									<div class="list-item-inner">
										<div class="list-item-text title">{{item.appName}}</div>
										<div class="list-item-text">下载次数:<span>{{item.downloadCount}}</span>次</div>
										<div class="list-item-text" style="padding-top: 8px;"> 
											<el-rate
												v-model="item.value"
												:colors="['#08b14d','#08b14d','#08b14d']"                                    
												text-color="green"
												score-template="{item.value}">
												</el-rate> 
										</div>
										<div class="list-item-text"><span>{{item.score}}分</span></div> 
									</div>
									<div :title="item.remark" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width:500px">{{item.remark}}</div>  
								</div>
								<div style="width:100px" class="detail" @click="homePageToHidden(item.appName)" >详情</div>
								</li>
								</ul>
								</el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="最近更新" name="second">
							<el-row >
								<el-col :span='24'>
								<ul>
								<li class="list-item" v-for="(item,index) in tableData"  >
								<div class="list-item-media">
									<img v-if="index==1" src="/src/images/app_sign.png" style="margin-top:15px">
									<img v-if="index==0" src="/src/images/task.png" style="margin-top:15px">
									<img v-if="index==3" src="/src/images/pushcase.png" style="margin-top:15px">
									<img v-if="index==2" src="/src/images/app_police.png" style="margin-top:15px">
										<img v-if="index>3" src="/src/images/app_sign.png" style="margin-top:15px">
									</div> 
								<div style="width:98%">
									<div class="list-item-inner">
										<div class="list-item-text title">{{item.appName}}</div>
										<div class="list-item-text">下载次数:<span>{{item.downloadCount}}</span>次</div>
										<div class="list-item-text" style="padding-top: 8px;"> 
											<el-rate
												v-model="item.value"
												:colors="['#08b14d','#08b14d','#08b14d']"                                    
												text-color="green"
												score-template="{item.value}">
												</el-rate> 
										</div>
										<div class="list-item-text"><span>{{item.score}}分</span></div> 
									</div>
									<div :title="item.remark" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width:500px">{{item.remark}}</div>  
								</div>
								<div style="width:100px" class="detail" @click="homePageToHidden(item.appName)" >详情</div>
								</li>
								</ul>
								</el-col>
							</el-row>
						</el-tab-pane>
					</el-tabs>
					<!--工具条-->
					<el-form :inline="true" :model="filters">
						<!-- <el-button plain @click="ApplicationType" style="float:left;" type="text" icon="el-icon-arrow-left">返回</el-button> -->
						<el-form-item style="float:right">
							<el-button type="primary" size='small' v-on:click="getList">查询</el-button>
						</el-form-item>
						<el-form-item style="float:right">
							<el-input v-model="filters.className" size='small' placeholder="请输入应用名称" @keyup.enter.native="searchEnterFun"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
        </div>
		<div v-if="detailedPageShow" >
			<application-detailed-page @backToBase='baseAddShow' :message="parentMsg"></application-detailed-page>
		</div>

    </section>
    
</template>
<script>
//:disabled="this.fileUrl==='0'"
	import utils from '../api/utils'
	import  checks  from '../api/checks'
	//import NProgress from 'nprogress'
	import { getApplicationTypeList,
	addApplicationType,
	editApplicationType,
	deleteApplicationType,
	getMarketList,
	webHost } from '../api/api';
	import applicationDetailedPage from './applicationDetailedPage.vue'

	export default {
		data() {
			return {
				parentMsg: 'a message from parent',  //在data中定义需要传入的值
				hiddenOn: false,
				showOn: true,
				homeShow: true,
				detailedPageShow: false,
				filters: {
					className: ''
				},
				tableData: [],
				activeName: 'first',
				total: 0,
				pageNum: 1,
				pageSize:10,
				listLoading: false,
				sels: [],//列表选中列
				market:[],//所有市场
				superClassList:[],//所有分类

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					className: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
		

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					className: [
						{ required: true, message: '请输入分类名称', trigger: 'blur' }
					]
				},
	
				defaultProps: {
					label: 'marketName',
					isLeaf: 'leaf',
				},
				fileList: [],
				paramData:{sys:1,module:3,keyId:""},
				fileUrl:'',

				addOrEdit:0,
                uploadUrl:'',
                value5: 3.7
			}
		},
		components:{
			applicationDetailedPage,
		},
		methods: {
			homePageToHidden(data){//点击进入详细页面
				console.log(data)
				this.homeShow = false;
				this.detailedPageShow = true;
				this.parentMsg = data;
			},
			baseAddShow(data){
				this.homeShow = true;
				this.detailedPageShow = false;
				setTimeout(() => {
					let elFormInline = document.getElementsByClassName('el-form--inline')[0];
					elFormInline.style.position = 'absolute';
					elFormInline.style.right = '50px';
					elFormInline.style.top = '-7px'
				}, 50);
			},
			formatIsShow: function (row, column) {
				return row.isShow == 1 ? '是' : row.isShow == 0 ? '否' : '未知';
			},
			formatCreateDate: function (row, column) {
				return row.createDate = (!row.createDate || row.createDate == '') ? '' : checks.formatDate(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss');
			},
			formatUpdateDate: function (row, column) {
				return row.updateDate = (!row.updateDate || row.updateDate == '') ? '' : checks.formatDate(new Date(row.updateDate), 'yyyy-MM-dd hh:mm:ss');
			},
			handleCurrentPageChange: function (pageNum) {// 翻页动作
                this.pageNum = pageNum;
                this.getList();// 翻页后刷新页面数据
			},
			inputChange: function (name,id,form) {
				checks.checkNum(name,id,form,0,this);
			},
			//实现回车键搜索功能
			searchEnterFun:function(e){
				this.getList();	
			},
			//获取列表
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					className: this.filters.className,
					// marketCodeList:this.$refs.tree.getCheckedKeys()
				};
				this.listLoading = true;
				//NProgress.start();
				getApplicationTypeList(params).then(function(result){
               let obj=[
				   {
                     appName:'待办事项',
                     appIcon: '',
                     downloadCount:'2340',
                     value:5,
                     score:10,
                     remark:'专门测量各车流、人流等各时间段的工具，专门测量各车流、人流的各时间段的专门次数...'

					},
				   {
                     appName:'公安新闻',
                     appIcon: '',
                     downloadCount:'2320',
                     value:4,
                     score:8,
                     remark:'可在手机上随时随地高效便捷地管理自己的待办事项。'

					},
				   {
                     appName:'通知通告',
                     appIcon: '',
                     downloadCount:'1500',
                     value:4.5,
                     score:9,
                     remark:'为方便报警人与民警及时取得联系,通过网格化布警,不仅最大限度把警力投放到了街面上,还大大提高了接处警效率'

					},
				   
				];
					//this.tableData = result.data.list.map(item=> Object.assign({},item,obj)  );
                    this.tableData = obj;     
                   
					this.pageNum = result.data.pageNum;
					this.pageSize = result.data.pageSize;
					this.total = result.data.total;
					this.listLoading = false;
				}.bind(this)).catch(function (error) {
					this.listLoading = false;
					console.log(error);
				}.bind(this));
			},	
			//显示编辑界面
			ApplicationTypeEdit: function (index, row) {
	
			},
			//显示新增界面
			ApplicationType: function () {
		
			},
	
			selsChange: function (sels) {
				this.sels = sels;
			},

			toGetList:function(){
				this.getList();
			},
		
         
      
		},
		mounted() {
			this.getList();
			this.uploadUrl = utils.uploadUrl(); //设置图片上传地址
			setTimeout(() => {
					let elFormInline = document.getElementsByClassName('el-form--inline')[0];
					elFormInline.style.position = 'absolute';
					elFormInline.style.right = '50px';
					elFormInline.style.top = '-7px'
				}, 50);
		},
		created(){
		}
	}
	setTimeout(() => {
		let elFormInline = document.getElementsByClassName('el-form--inline')[0];
		elFormInline.style.position = 'absolute';
		elFormInline.style.right = '50px';
		elFormInline.style.top = '-7px'
	}, 50);
</script>
